<template>
  <div ref="map"></div>
</template>

<script>
import * as echarts from 'echarts'
import axios from 'axios'

export default {
  name: 'Map',
  data() {
    return {
      echarts: null,
      options: {
        geo: {
          type: 'map',
          map: 'chinaMap',
          // 设置可拖动，可放大缩小
          roam: true,
          // 设置初始缩放，默认为1
          zoom: 2,
          // 显示省份名称
          label: {
            show: true
          },
          // 设置地图中心点，经纬度数组
          // center: []
        },
        series: [
          {
            type: 'map',
            geoIndex: 0,
            data: []
          },
          {
            // 设置为特效散点图
            type: 'effectScatter',
            // 设置坐标系统
            coordinateSystem: 'geo',
            geoIndex: 0,
            data: [],
            // 调整涟漪动画范围大小
            rippleEffect: {
              scale: 10
            }
          }
        ],
        // 地图按照数值显示区域颜色
        visualMap: {
          min: 0,
          max: 60,
          // 配置渐变
          inRange: {
            // 渐变颜色 数值从小到大 white -> red
            color: ['white', 'red']
          },
          // 数据筛选
          calculable: true
        }
      }
    }
  },
  async mounted() {
    await this.getMap()
    this.echarts = echarts.init(this.$refs.map)
    await this.getAirData()
    await this.getEffectData()
    this.echarts.setOption(this.options)
  },
  methods: {
    async getMap() {
      let res = await axios.get('/json/chinaMap.json', {
        baseURL: ''
      })
      echarts.registerMap('chinaMap', res)
    },

    async getAirData() {
      let res = await axios.get('/json/airData.json', {
        baseURL: ''
      })
      this.options.series[0].data = res
    },

    async getEffectData() {
      let {data} = {
        data: [
          {
            value: [113.280637, 23.125178]
          }
        ]
      }
      this.options.series[1].data = data
    }
  }

}
</script>

<style scoped>

</style>
